<template>
  <div class="formDesign" ref="bod">
    <FlowHeader :submit="submitDat"  v-on:routHandle="routHandle" v-on:back='isBack' />
    <div class="formDesign-content" ref="content">
      <div :class="{procedureTemplate: true, topShow:topShow}">
        <div class="title">
          <span> 控件库 </span>
        </div>
        <div class="items-wrap">
          <div class="items" v-for="(item, index) in itemsDataes" :key="index" :ref="`it`+index" @mousedown="mouseDown(item)">
            <div>{{item.lab}}</div>
            <div class="icon" :class="[item.icon]"></div>
          </div>
          <div class="drag" v-show="isdrag" :style="{left:left,top:top}">
            <div>{{dragData.lab}}</div>
            <div class="icon" :class="[dragData.icon]"></div>
          </div>
        </div>
      </div>
      <div class="phoneContent" ref="phCont">
        <div class="phoneShow" ref="phScroll">
          <div v-if="phDataes.length > 0">
            <div v-for="(it, index) in phDataes" :key="index" @mousedown="phMouseDown(it, index)" @click.stop="openSet(index)">
              <div :class="{phItem:true, mov: actId === index, act: actInd === index && !isdrag, over:actId !== index}" v-if="it !== 'empty'">
                <span class="close" @click.stop="delNode(index)">X</span>
                <div>{{it.data.title || it.lab}}</div>
                <div class="icon" :class="[it.icon]"></div>
              </div>
              <div v-if="it === 'empty'" class="phEmpty"></div>
            </div>
          </div>
          <div class="phItem-empty" v-if="phDataes.length <= 0">
            <div><img src="./../../assets/empty.png" width="90%" alt=""></div>
            <div>选择左侧控件拖动到此处</div>
          </div>
        </div>
      </div>
      <div :class="{setParamsBox: true, setShow:setShow}">
        <div class="content" v-show="type == 'input'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div class="lab">标题：</div>
            <div><input type="text" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">提示文字：</div>
            <div><input type="text" v-model="attributeset.data.placeholder" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填</el-checkbox> </div>
          </div>
        </div>
        <div class="content" v-show="type === 'textArea'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div class="lab">标题：</div>
            <div><input type="text" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">提示文字：</div>
            <div><input type="text" v-model="attributeset.data.placeholder" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填</el-checkbox> </div>
          </div>
        </div>
        <div class="content" v-show="type === 'number'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div class="lab">标题：</div>
            <div><input type="text" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">提示文字：</div>
            <div><input type="text" v-model="attributeset.data.placeholder" placeholder="请输入"></div>
            <div class="lab">单位：</div>
            <div><input type="text" v-model="attributeset.data.bit" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填（勾选后可作为流程条件）</el-checkbox> </div>
          </div>
        </div>
        <div class="content" v-show="type === 'radio'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div class="lab">标题：</div>
            <div><input type="text" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">提示文字：</div>
            <div><input type="text" v-model="attributeset.data.placeholder" placeholder="请输入"></div>
            <div class="lab">选项：<span>最多200项，每项最多50字</span></div>
            <div class="labTitBox" v-for="(item, ind) in attributeset.data.titlab" :key="ind">
              <input type="text" style="width: 220px" :value="item" @input="event => labTitChang(event, ind)" placeholder="请输入选项名">
              <span class="sub" @click="labTitChang('sub', ind)"> - </span>
              <span class="add" @click="labTitChang('add', ind)"> + </span>
            </div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填（勾选后可作为流程条件）</el-checkbox> </div>
          </div>
        </div>
        <div class="content" v-show="type === 'checkbox'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div class="lab">标题：</div>
            <div><input type="text" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">提示文字：</div>
            <div><input type="text" v-model="attributeset.data.placeholder" placeholder="请输入"></div>
            <div class="lab">选项：<span>最多200项，每项最多50字</span></div>
            <div class="labTitBox" v-for="(item, ind) in attributeset.data.titlab" :key="ind">
              <input type="text" style="width: 220px" :value="item" @input="event => labTitChang(event, ind)" placeholder="请输入选项名">
              <span class="sub" @click="labTitChang('sub', ind)"> - </span>
              <span class="add" @click="labTitChang('add', ind)"> + </span>
            </div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填</el-checkbox> </div>
          </div>
        </div>
        <div class="content" v-show="type === 'date'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div class="lab">标题：</div>
            <div><input type="text" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">日期类型：</div>
            <div>
              <el-radio v-model="attributeset.data.dataType" label="1">年-月-日 时:分</el-radio>
              <el-radio v-model="attributeset.data.dataType" label="2">年-月-日</el-radio>
            </div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填（勾选后可作为流程条件）</el-checkbox> </div>
          </div>
        </div>
        <div class="content" v-show="type === 'img'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div class="lab">标题：</div>
            <div><input type="text" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填</el-checkbox> </div>
            <div class="lab">水印照片：</div>
            <div><el-checkbox v-model="attributeset.data.watermark">开启后图片上传只能通过手机拍照方式</el-checkbox> </div>
          </div>
        </div>
        <div class="content" v-show="type === 'money'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div class="lab">标题：</div>
            <div><input type="text" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">提示文字：</div>
            <div><input type="text" v-model="attributeset.data.placeholder" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填（勾选后可作为流程条件）</el-checkbox> </div>
            <div class="lab">大写：</div>
            <div><el-checkbox v-model="attributeset.data.capitalization">显示大写(输入后自动显示大写)</el-checkbox> </div>
          </div>
        </div>
        <div class="content" v-show="type === 'explain'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div><input type="hidden" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">说明文字：<span>最多5000字</span></div>
            <div><el-input type="textarea" v-model="attributeset.data.explain" placeholder="请输入" /></div>
            <div class="lab">可以输入链接跳转地址：</div>
            <div><el-input type="textarea" v-model="attributeset.data.explainUrl" placeholder="请输入" /></div>
            <div class="lab">显示：</div>
            <div><el-checkbox v-model="attributeset.data.isShow">不在审批页显示</el-checkbox> </div>
          </div>
        </div>
        <div class="content" v-show="type === 'file'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div class="lab">标题：</div>
            <div><input type="text" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填</el-checkbox> </div>
          </div>
        </div>
        <div class="content" v-show="type === 'contacts'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div class="lab">标题：</div>
            <div><input type="text" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填</el-checkbox> </div>
            <div class="lab">选项：</div>
            <div>
              <el-radio v-model="attributeset.data.dataType" label="1">只能选择一人</el-radio>
              <el-radio v-model="attributeset.data.dataType" label="2">可同时选择多人</el-radio>
            </div>
          </div>
        </div>
        <div class="content" v-show="type === 'department'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div class="lab">标题：</div>
            <div><input type="text" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填（勾选后可作为流程条件）</el-checkbox> </div>
            <div class="lab">选项：</div>
            <div style="line-height: 30px;">
              <el-radio v-model="attributeset.data.dataType" label="1">只能选择一个部门</el-radio>
              <el-radio v-model="attributeset.data.dataType" label="2">可同时选择多个部门</el-radio>
            </div>
          </div>
        </div>
        <div class="content" v-show="type === 'location'">
          <div class="title">
            {{attributeset.lab}}
          </div>
          <div class="list" v-if="attributeset.data">
            <div><input type="hidden" v-model="attributeset.data.title" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填（勾选后可作为流程条件）</el-checkbox> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FlowHeader from '@/components/FlowHeader'
import { mapGetters } from 'vuex'
import Compare from '@/utils/compareJson.js'
export default {
    name: 'Dashboard',
    components: {
        FlowHeader
    },
    data() {
        return {
            topShow: true,
            setShow: false,
            setTit: '属性设置',
            itemData:'',
            type: 'input',
            isdrag: false,
            left: 0,
            top: 0,
            mouseX: 0,
            mouseY: 0,
            fixedTop: 68, // 顶部固定高
            fixedX: 0,   // 鼠标起始值 X
            fixedY: 0,   // 鼠标起始值 X
            movInd: '', // 被点击框的位置
            movToInd: 0, // 移动到位置的index
            phx1: 0,  // 手机位置
            phx2: 0,
            phy1: 0,
            phy2: 0,
            actId: '', // 当前选择项位置
            fixedId: '', // 起始点位置
            actInd: '', //被点击项
            oldMove: 0, // 上次位移
            movSt: true,
            dragData: {}, // 被移动框的数据
            attributeset: {},
            phDataes: [],
            phDataesBuff: [],
            itemsDataes: [
                {type: 'input', lab: '单行输入框', icon: 'icondanhangshuru', data:{title: '单行输入框', placeholder: '', isMust: false}},
                {type: 'textArea', lab: '多行输入框', icon: 'iconduohangshuru', data:{title: '多行输入框', placeholder: '', isMust: false}},
                {type: 'number',lab: '数字输入框', icon: 'iconshuzishuru', data:{title: '数字输入框', condit: '', value: ''}},
                {type: 'radio',lab: '单选框', icon: 'icondanxuan', data:{title: '单选框', titlab: ['选项1'], radio: []}},
                {type: 'checkbox',lab: '多选框', icon: 'iconduoxuan', data:{title: '多选框', titlab: ['选项1']}},
                {type: 'date',lab: '日期', icon: 'iconriqi', data:{title: '日期'}},
                // {type: 'dataArea',lab: '日期区间', icon: 'iconriqiqujian', data:{title: ''}},
                {type: 'img',lab: '图片', icon: 'icontupian', data:{title: '图片'}},
                {type: 'money',lab: '金额', icon: 'iconjine', data:{title: '金额', condit: '', value: ''}},
                {type: 'explain',lab: '说明文字', icon: 'iconshuomingwenzi', data:{title: '说明文字'}},
                {type: 'file',lab: '附件', icon: 'iconfujian', data:{title: '附件'}},
                {type: 'contacts',lab: '联系人', icon: 'iconlianxiren', data:{title: '联系人'}},
                {type: 'department',lab: '部门', icon: 'iconbumen', data:{title: '部门', inDepartment: []}},
                {type: 'location',lab: '地点', icon: 'icondidian', data:{title: '地点'}},
            ]
        }
    },
    computed: {
        ...mapGetters([
            'flowId',
            'tableData',
            'baseData',
            'flowData'
        ])
    },
    mounted() {
        this.init()
        this.phCont()
    },
    methods: {
        async init(){
            if (this.flowId){
                await this.$store.dispatch('approval/getFlowInfoAct', {id: this.flowId}).then((res) => {
                    this.$store.dispatch('approval/setflowdata', {...res})
                    this.$store.dispatch('approval/setflowid', '')
                    let phDataes = []
                    res.tableData.forEach(n => {
                        n.data == "" ? phDataes.push({...n, data: {}}) : phDataes.push({...n, data: JSON.parse(n.data)})
                    })
                    this.phDataes = phDataes
                    this.phDataesBuff = JSON.parse(JSON.stringify(phDataes))
                    this.loading = false
                }).catch(() => {
                    this.$message.error('数据请求失败！请稍后重试')
                    this.loading = false
                })

            }else{
                if ( this.tableData.length > 0){
                    let phDataes = []
                    this.tableData.forEach(n => {
                        if (typeof n.data == 'object' ) {
                          phDataes.push({...n, data: {...n.data}})
                        } else if (n.data == "" ){
                          phDataes.push({...n, data: {}})
                        } else {
                          phDataes.push({...n, data: JSON.parse(n.data)})
                        }
                    })
                    this.phDataes = phDataes
                    this.phDataesBuff = JSON.parse(JSON.stringify(phDataes))
                }
            }
        },
        isBack(val){
          if (JSON.stringify(this.phDataes) != JSON.stringify(this.phDataesBuff)){
            this.$store.dispatch('approval/setBack')
          }
        },
        routHandle(url){
            this.phDataes.forEach(n => {
                if (n.fieldKey == ''){
                    this.$store.dispatch('approval/getFileKeyAct').then(res => {
                        n.fieldKey = res
                    })
                }
                
            })
            this.$store.dispatch('approval/setflowdata', { tableData: this.phDataes })
            if (JSON.stringify(this.phDataes) != JSON.stringify(this.phDataesBuff)){
              this.$store.dispatch('approval/setBack')
            }
            this.$router.push(url)
        },
        mouseUp() {
            this.isdrag = false
            this.movSt = false
            this.actId = ''
            if (this.phDataes.indexOf('empty') !== -1) {
                this.phDataes.splice(this.phDataes.indexOf('empty'), 1)
                this.phDataes.splice(this.movToInd, 0, this.dragData)
                if (this.movInd != 'add') {
                    this.phDataes.splice(this.movInd < this.movToInd ? this.movInd : this.movInd + 1, 1)
                    this.actInd = this.movInd < this.movToInd ? this.movToInd - 1 : this.movToInd
                }
            }
            console.log('up')
            this.$refs.content.onmousemove = null
            this.$refs.bod.onmouseup = null
        },
        mouseMove(e) {
            const x = e.clientX
            const y = e.clientY
            this.top = (y - this.mouseY - this.fixedTop) + 'px'
            this.left = (x - this.mouseX) + 'px'
            this.movSt = true
            this.moveCheck(x, y)
            console.log('move')
            this.$refs.bod.onmouseup = this.mouseUp
        },
        mouseDown(item) {
            this.dragData = item
            this.dragDataHandle()
            this.isdrag = true
            const x = event.clientX
            const y = event.clientY
            const lx = event.layerX
            const ly = event.layerY
            this.movInd = 'add'
            this.mouseX = lx
            this.mouseY = ly
            this.top = (y - ly - this.fixedTop) + 'px'
            this.left = (x - lx) + 'px'
            console.log('down')
            this.$refs.content.onmousemove = this.mouseMove
            this.$refs.bod.onmouseup = this.mouseUp
        },
        phMouseDown(item, i) {
            this.phCont()
            this.type = item.type
            this.fixedX = event.clientX
            this.fixedY = event.clientY
            this.movInd = i
            this.attributeset = item
            this.setTit = item.lab
            this.movSt = true
            this.dragData = item
            this.$refs.content.onmousemove = this.phmouseMove
            this.$refs.bod.onmouseup = this.mouseUp
        },
        phmouseMove(e) {
            const x = event.clientX
            const y = event.clientY
            this.top = (y - 16 - this.fixedTop) + 'px'
            this.left = (x - 74) + 'px'
            this.moveCheck(x, y)
            this.$refs.bod.onmouseup = this.mouseUp
        },
        // 移动处理
        moveCheck(x, y) {
            if (x < this.phx1 || x > this.phx2) {
                if (this.phDataes.indexOf('empty') !== -1) {
                    this.phDataes.splice(this.phDataes.indexOf('empty'), 1)
                    this.movSt = true
                }
                return false
            }
            if (this.fixedY == 0 || Math.abs(y - this.fixedY) > 2) {
                const st = 158
                const scNode = this.$refs.phScroll
                const num = (y + scNode.scrollTop - 158) / 48
                const end = this.phDataes.length * 48 < 560 ? this.phDataes.length * 48 + 158 : 560 + 158

                if (y < st) {
                    this.fixedId = 0
                    this.movToInd = 0
                    scNode.scrollTop = 0
                } else if (y > end) {
                    this.movToInd = this.phDataes.length - 1
                    this.fixedId = this.movToInd
                    scNode.scrollTop = this.phDataes.length * 48 - 500
                } else {
                    this.movToInd = Math.round(num)
                    this.fixedId = this.fixedY ? Math.round((this.fixedY - 138) / 48) : ''
                }
                this.isdrag = true
                if (this.movSt && this.phDataes.indexOf('empty') === -1) {
                    this.oldMove = this.movToInd
                    this.phDataes.splice(this.movToInd, 0, 'empty')
                    this.movSt = false
                } else {
                    this.phDataes.splice(this.phDataes.indexOf('empty'), 1)
                    this.phDataes.splice(this.movToInd, 0, 'empty')
                    this.oldMove = this.movToInd
                }
                if (this.fixedY && this.phDataes.indexOf('empty') !== -1) {
                    this.actId = this.fixedId > this.movToInd ? this.movInd + 1 : this.movInd
                }
            }
        },
        delNode(ind) {
            if (this.actInd == ind) {
                this.actInd = ''
                this.setShow = false
            } else if (ind < this.actInd) {
                this.actInd = this.actInd - 1
            }
            this.phDataes.splice(ind, 1)
        },
        openSet(i) {
            this.actInd = i
            this.setShow = true
        },
        // 记录手机位置
        phCont() {
            const stX = this.$refs.phCont.offsetLeft - 296 / 2
            this.phx1 = stX
            this.phx2 = stX + 296
            this.phy1 = 0
            this.phy2 = document.body.offsetHeight - 68
        },
        // 移动数据处理
        dragDataHandle(item){
            this.$store.dispatch('approval/getFileKeyAct').then(res => {
                this.dragData.fieldKey = res
            })
        },
        //fieldKey获取
        async getFileKey(){
            await this.$store.dispatch('approval/getFileKeyAct').then(res => {
                this.itemData = res
            })
        },
        //
        labTitChang(st, ind) {
            if (typeof st == 'string' && st == 'add') {
                this.attributeset.data.titlab.push(`选项${this.attributeset.data.titlab.length+1}`)
            } else if (typeof st == 'string' && st == 'sub') {
                this.attributeset.data.titlab.splice(ind, 1)
            } else {
                this.attributeset.data.titlab[ind] = st.target.value
            }
        },
        // 数据保存
        async submitDat (){
            await this.$store.dispatch('approval/setflowdata', { tableData: this.phDataes })
            await this.$store.dispatch('approval/setflowst', 'memory')
            const tableData = []
            this.phDataes.forEach(n => {
                tableData.push({...n, title: n.data.title, data: typeof(n.data) === 'string' ? n.data : JSON.stringify(n.data)})
            })
            const pramas = {baseData:this.baseData, tableData, flowData: this.flowData}
            const data = await this.$store.dispatch('approval/addFlowInfoAct', {...pramas})
            if (data.success) {
              this.$store.dispatch('approval/setBack', true)
              this.$message.success('数据发布成功！')
              this.$router.push('/approval/admin')
            } else {
              this.$message.success(data.message)
            }
            
        },
    },
    watch: {}
}
</script>

<style lang="scss">
  body {
    background-color: #f5f5f7 !important;
  }

  .formDesign {
    min-width: 1000px;
    height: calc(100vh - 70px);

    &-title {
      position: relative;
      z-index: 99999;
      top: 0px;
      left: 0px;
      width: 100%;
      color: #fff;
      background: #38adff;
      height: 68px;

      .topBox {
        display: flex;
        text-align: center;
        width: 500px;
        margin: 0 auto;
        padding: 25px 0;
      }

      .label {
        flex: 1;
        cursor: pointer;

        span {
          display: inline-block;
          width: 16px;
          height: 16px;
          line-height: 16px;
          font-size: 12px;
          border-radius: 100%;
          border: solid 1px #fff;
          margin-right: 4px;
        }
      }
    }

    &-content {
      *::selection {
        background: none;
      }

      position: relative;
      width: 100%;
      height: calc(100vh - 68px);
      overflow: hidden;
      top: 68px;

      .procedureTemplate {
        position: absolute;
        z-index: 99;
        box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .1);
        background: #fff;
        left: -360px;
        width: 360px;
        height: 100%;

        .title {
          margin: 17px 0;
          font-size: 14px;
          color: #666;
          padding: 0 15px;
          width: 100%;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
        }

        .items-wrap {
          display: flex;
          flex-wrap: wrap;
          padding-left: 12px;

          .items {
            position: relative;
            font-size: 12px;
            width: 162px;
            line-height: 1.5;
            color: #666;
            cursor: move;
            margin: 6px 12px 8px 0px;
            padding: 6px 10px;
            border-radius: 2px;
            border: 1px solid #e3e4e4;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .drag {
            position: absolute;
            background: #fff;
            font-size: 12px;
            width: 162px;
            line-height: 1.5;
            color: #666;
            cursor: all-scroll;
            margin: 0px;
            padding: 6px 10px;
            border-radius: 2px;
            border: 1px solid #e3e4e4;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }

      .topShow {
        transition: 200ms;
        left: 0;
      }

      .setParamsBox {
        position: absolute;
        top: 0px;
        box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, .1);
        background: #fff;
        right: -325px;
        width: 325px;
        height: 100%;
        font-size: 14px;

        input:focus {
          outline: none;
        }

        .title {
          padding: 5px 15px;
          font-size: 16px;
          line-height: 30px;
          width: 100%;
        }

        .list {
          padding: 10px 15px;

          input {
            width: 100%;
            border: solid 1px #ccc;
            border-radius: 3px;
            line-height: 25px;
            padding: 0 10px;
            font-size: 14px;
            color: #666;
          }

          .lab {
            height: 15px;
            margin: 10px 0;
          }
          .labTitBox{
            margin-bottom: 10px;
            span{
              display: inline-block;
              width: 20px;
              height: 20px;
              margin: 0 5px;
              text-align: center;
              line-height: 16px;
              font-size: 20px;
              border-radius: 20px;
              color: #fff;
              cursor: pointer;
            }
            .sub{
              background: #c8c9d5;
            }
            .add{
              background: #3345ff;
            }
          }
        }
      }

      .setShow {
        transition: 200ms;
        right: 0;
      }

      .phoneContent {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 322px;
        height: 648px;
        background: url("./../../assets/phone.png") top center no-repeat;
        background-size: 100% 100%;
        z-index: 9;

        .phoneShow {
          overflow-y: scroll;
          position: absolute;
          transition: 200ms;
          top: 90px;
          left: 50%;
          transform: translateX(-50%);
          width: 276px;
          padding: 0 10px;
          padding-bottom: 20px;
          height: 520px;

          .phItem {
            background: #fff;
            position: relative;
            margin: 10px 0;
            width: 100%;
            padding: 10px;
            font-size: 14px;
            border-radius: 3px;
            cursor: move;
            display: flex;
            justify-content: space-between;
            border: dashed 1px #fff;
            color: #333;

            .close {
              display: none;
              background: #f00;
              color: #fff;
              text-align: center;
              width: 20px;
              height: 20px;
              font-size: 14px;
              line-height: 20px;
              border-radius: 50%;
              position: absolute;
              right: -10px;
              top: -10px;
              cursor: pointer;
            }

            &:hover .close {
              display: block;
            }
          }

          .over {
            &:hover {
              border: dashed 1px #f00;
            }
          }

          .mov:after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 3px;
            width: 256px;
            height: 38px;
            background: rgba(0, 0, 0, 0.3);
            border: dashed 2px rgba(0, 0, 0, 0.3);
          }

          .act {
            border: solid 1px #f00;

            &:hover {
              border-style: solid;
            }
          }

          .phEmpty {
            background: #f00;
            height: 4px;
            position: relative;
            margin: 10px 0;

            &:before, &:after {
              position: absolute;
              right: -4px;
              top: -4px;
              content: '';
              width: 0;
              height: 0;
              border-width: 6px;
              border-style: solid;
              border-color: transparent #f00 transparent transparent;
            }

            &:before {
              left: -4px;
              right: auto;
              border-color: transparent transparent transparent #f00;
            }
          }

          .phItem-empty {
            padding-top: 120px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            color: #999;
          }
        }
      }
    }
  }
</style>
